<template>
  <div>
    <baidu-map
      :center="center"
      :zoom="15"
      :scroll-wheel-zoom="true"
    >

      <bm-view class="map1"></bm-view>
      <bm-control :offset="{ width: '10px', height: '10px' }">
        <!-- :sugStyle="{ zIndex: 999999 }"中 zIndex设置太小不会显示搜索提示-->
        <bm-auto-complete v-model="keyword" :sugStyle="{ zIndex: 999999 }">
          <input type="text" v-model="keyword" placeholder="请输入地名关键字" />
        </bm-auto-complete>
      </bm-control>
      <bm-local-search
      @infohtmlset="infohtmlset"
        :keyword="keyword"
        :auto-viewport="true"
        style="display: none"
        
      ></bm-local-search>
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
        @locationSuccess="locationSuccess"
      ></bm-geolocation>
    </baidu-map>
  </div>
</template>
<script>
export default {
  data() {
    return {
      center: { lng: 116.404, lat: 39.915 },
      keyword: "",
      address: "",
      area: "",
    };
  },
  methods: {
    infohtmlset(rs){
console.log(rs)
               this.address = rs.address;
          let district=this.address.split('区')[0].split('市')[1]+"区";

        this.area =
          rs.province +
          "-" +
          rs.city +
          "-" +
          district;
        //向父组件传解析的地址
        this.$emit("addresschange", this.address, this.area,rs.point.lng,rs.point.lat);
    },


    locationSuccess(arr) {
      this.center.lng = arr.point.lng;
      this.center.lat = arr.point.lat;
      this.area =
        arr.addressComponent.province +
        arr.addressComponent.city +
        arr.addressComponent.district;
      this.address =
        this.area +
        arr.addressComponent.street +
        arr.addressComponent.streetNumber;
      //向父组件传解析的地址
      this.$emit("addresschange", this.address, this.area);
    },
  },
};
</script>
<style>
.map1 {
  width: 100%;
  height: 400px;
}
</style>